import React from 'react';
import {ProFormDigit, ProFormRadio, ProFormText} from "@ant-design/pro-form";
import {Button, Form, message, Modal, Radio} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";

const MyComponent = (props) => {
  const {isedit,issetEdit} = props
  return (
    <Modal<{
      name: string;
      company: string;
    }>
      visible={isedit}
      modalProps={ {
        onCancel:() => {issetEdit(false)}
      } }
      onFinish={async (values) => {
        console.log(values.name);
        message.success('提交成功');
        return issetEdit(false);
      }}
      title="运费模版"
      width={1300}
    >
      <div>
        <ProFormText
          width={750}
          name="name"
          label='模板名称：'
          tooltip="模板名称"
          placeholder='模板名称'
        />
      </div>
      <div>
        <ProFormRadio.Group
          label="计费方式："
          tooltip="计费方式"
        >
          <Radio.Group defaultValue={1}>
            <Radio value={1}>按件数</Radio>
            <Radio value={2}>按件数</Radio>
            <Radio value={3}>按体积</Radio>
          </Radio.Group>
        </ProFormRadio.Group>
      </div>
      <div>
        <div>
          配送区域及运费:
        </div>
        <ProTable
          tableAlertOptionRender={false}
          editable={ {
            type: 'multiple'
          } }
          rowKey="id"
          options={false}
          search={false}
          pagination={false}
          dateFormatter="string"
        />
      </div>

      <div style={ {marginTop:'10px'} }>
        <Button type="primary"  onClick={()=>{setFindModel(true)}}>
          <PlusOutlined/>
          单独添加配送区域
        </Button>
      </div>

      <div style={ {marginTop: '40px'} }>
        <ProFormRadio.Group
          name='Group'
          label="指定包邮："
          tooltip="指定包邮"
          initialValue={"auto"}
          options={[
            {
              label: '开启',
              value: 'hand',
            },
            {
              label: '关闭',
              value: 'auto',
            },
          ]}
        />
        <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.Group !== curValues.Group}>
          {(forminstance) => {
            console.log(forminstance.getFieldValue('Group'));
            switch (forminstance.getFieldValue('Group')) {
              case 'hand' :
                return (
                  <div>
                    <ProTable
                      // columns={column}
                      tableAlertOptionRender={false}
                      editable={ {
                        type: 'multiple'
                      } }
                      dataSource={[]}
                      rowKey="id"
                      options={false}
                      search={false}
                      pagination={false}
                      dateFormatter="string"
                      headerTitle={false}
                    />
                    <div style={ {marginTop:'10px'} }>
                      <Button type="primary"  onClick={()=>{setFindModel(true)}}>
                        <PlusOutlined/>
                        单独指定包邮
                      </Button>
                    </div>
                  </div>
                )
                break;
              case 'auto':
                return (
                  <>
                  </>
                )
            }
          }}
        </Form.Item>
      </div>
      <div style={ {marginTop: '40px'} }>
        <ProFormRadio.Group
          name='noGroup'
          label="指定不送达："
          tooltip="指定不送达"
          initialValue={"2"}
          options={[
            {
              label: '开启',
              value: '1',
            },
            {
              label: '关闭',
              value: '2',
            },
          ]}
        />
        <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.noGroup !== curValues.noGroup}>
          {(forminstance) => {
            console.log(forminstance.getFieldValue('noGroup'));
            switch (forminstance.getFieldValue('noGroup')) {
              case '1' :
                return (
                  <div>
                    <ProTable
                      tableAlertOptionRender={false}
                      editable={ {
                        type: 'multiple'
                      } }
                      dataSource={[]}
                      rowKey="id"
                      options={false}
                      search={false}
                      pagination={false}
                      dateFormatter="string"
                      headerTitle={false}
                    />
                    <div style={ {marginTop:'10px'} }>
                      <Button type="primary"  onClick={()=>{setFindModel(true)}}>
                        <PlusOutlined/>
                        单独指定包邮
                      </Button>
                    </div>
                  </div>
                )
                break;
              case '2':
                return (
                  <>
                  </>
                )
            }
          }}
        </Form.Item>
      </div>
      <div>
        <ProFormDigit
          label='排序'
          width={750}
          placeholder='0'
          min={0}
        />
      </div>
    </Modal>
  );
};

export default MyComponent;
